<template>
  UsersType
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
    class="demo-ruleForm" :size="formSize" status-icon>
    <el-form-item label="用户ID" prop="id">
      <el-input v-model="ruleForm.id" />
    </el-form-item>
    <el-form-item label="用户名称" prop="username">
      <el-input v-model="ruleForm.username" />
    </el-form-item>
    <el-form-item label="用户化名" prop="nickname">
      <el-input v-model="ruleForm.nickname" />
    </el-form-item>
    <el-form-item label="用户手机号" prop="mobile">
      <el-input v-model="ruleForm.mobile" />
    </el-form-item>
    <el-form-item label="用户密码" prop="password">
      <el-input v-model="ruleForm.password" />
    </el-form-item>
    <el-form-item label="用户邮箱" prop="email">
      <el-input v-model="ruleForm.email" />
    </el-form-item>
    <el-form-item label="用户性别" prop="gender">
      <el-select v-model="ruleForm.gender">
        <el-option label="男" value="1" />
        <el-option label="女" value="0" />
      </el-select>
    </el-form-item>

    <el-form-item label="用户状态" prop="status">
      <el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用" :active-value="1"
        :inactive-value="0" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" :disabled="props.disabled" :loading="props.loading"
        @click="props.submitForm(ruleFormRef)">
        添加
      </el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {
  type RolesType,
  type UsersType,
  requestGetRolesPage,
  addRole,
  editRole
} from '@/service/study6/demo5'
import { reactive, ref, watch } from 'vue'
import { type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

//创建表单引用
const ruleFormRef = ref<FormInstance>()

// type RolesType = {
//   code: string
//   createTime?: string
//   id?: number
//   name: string
//   sort: number
//   status: number
// }

//定义表单的初始值 用于重置表单时恢复到这些值
let resetFormData: UsersType = {
  username: '',
  nickname: '',
  email: '',
  gender: 0,
  password: '',
  mobile: '',
  avatar: 'http://dummyimage.com/100x100',
  status: 1,
  deptId: 1,
  roleIds: [2]
}

//定义props 用于接收父组件传递的属性
const props = defineProps<{
  formData: UsersType //表单数据模型
  disabled: boolean //按钮是否禁用
  loading: boolean //是否显示加载状态
  submitForm: (a: any) => void //提交表单的方法
}>()

//表单的尺寸
const formSize = ref<ComponentSize>('default')

//表单验证规则 定义了每个字段的验证逻辑
const rules = reactive<FormRules<UsersType>>({
  id: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  username: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  nickname: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  // password: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  // email: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  // gender: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  // status: [{ required: true, message: '不可以为空', trigger: 'blur' }]

})

//表单数据模型 用于存储表单的输入数据
const ruleForm = ref<UsersType>(props.formData)

// 使用watch监听props.formData的变化，同步更新ruleForm和resetFormData
watch(
  () => props.formData,
  (nVal) => {
    console.log(nVal, 'ruleFormruleFormruleForm')
    ruleForm.value = nVal
    resetFormData = JSON.parse(JSON.stringify(nVal))
    console.log(resetFormData, 'resetFormData')
  },
  {
    immediate: true
  }
)

// watch(ruleForm, (nVal) => {
//   console.log(nVal, 'reffffruleFormruleFormruleForm')
// })

//  手动重置表单数据（不使用 表单组件抛出的方法重置）
const resetFieldsData = () => {
  ruleForm.value = JSON.parse(JSON.stringify(resetFormData))

  console.log(resetFormData, 'resetFormDataresetFormData')

  console.log('重置表单数据')
}

//重置按钮的点击事件处理函数 调用 resetFueldsData 并清除表单验证
const reset = () => {
  resetFieldsData()
  ruleFormRef.value?.clearValidate()
}

//将reset和resetFieldsData方法暴露给父组件
defineExpose({
  reset,
  resetFieldsData
})
</script>

<style></style>
